<!DOCTYPE html>
<html class="ui-page-login">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>loginmobile-手机登录</title>
	<link rel="stylesheet" href="css/intlTelInput.css">
	<link rel="stylesheet" href="css/intlTelInputdemo.css">
	<!--
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/styleloginmob.css" rel="stylesheet" />
        -->
	<style>
		.bac {
			margin: 0;
			padding: 0;
			width: 100%;
		}

		.mid {
			width: 55%;
			position: relative;
			margin-left: 20%;
		}

		.im {
			width: 100%;
			height: 3rem;
			position: absolute;
			margin-top: 25rem;
		}

		div#div1 {
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			z-index: -1;
		}

		div#div1>img {
			height: 100%;
			width: 100%;
			border: 0;
		}
	</style>

</head>

<body>
	<!--
		<input name="zone" style="position: absolute; width: 19%; z-index: 1; left: 20px; top: 30%" placeholder="+86" class="zone" />
		<input name="phone" style="position: absolute; width: 60%; z-index: 1; left: 105px; top: 30%" placeholder="请输入手机号" class="phone" required />
		<div id="layout1" style="position: absolute; width: 36px; height: 36px; z-index: 1; left: 87%; top: 31%">
			<a>
				<img alt="" height="36" src="images/sms.png" width="36" id="wxLogin">
			</a>
		</div>
		<input name="sms" style="position: absolute; width: 60%; z-index: 1; left: 20px; top: 38%" placeholder="请输入验证码" class="sms" required />
        -->
	<form>
		<input id="phone" type="tel" maxlength="11" placeholder="手机号">
		<button type="submit">短信(60)</button>
		<input id="sms" type="number" maxlength="6" placeholder="验证码">
	</form>
	<div class="bac">
		<div class="mid" id="mid">
			<img alt="" class="im" id="mbLogin" src="">
		</div>
	</div>

	<!--
		<input name="submit" style="position: absolute; z-index: 1; left: 35%; top: 70%" class="btn" type="submit" onclick="submit()" value="登录" />
        -->

	<div id="div1">
		<img src="">
	</div>

	<script src="js/mui.min.js"></script>
	<script src="js/mui.enterfocus.js"></script>
	<script src="js/common.js"></script>
	<script src="js/app.js"></script>
	<script src="js/h.min.js"></script>
	<!--
        <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
        -->
	<script src="js/jquery-1.11.2.min.js"></script>
	<script src="js/intlTelInput.js"></script>
	<script>
		$("#phone").intlTelInput({
			// allowDropdown: false,
			// autoHideDialCode: false,
			// autoPlaceholder: "off",
			// dropdownContainer: "body",
			// excludeCountries: ["us"],
			// formatOnDisplay: false,
			// geoIpLookup: function(callback) {
			//   $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
			//     var countryCode = (resp && resp.country) ? resp.country : "";
			//     callback(countryCode);
			//   });
			// },
			initialCountry: "cn",
			// nationalMode: false,
			onlyCountries: ['us', 'ca', 'cn'],
			// placeholderNumberType: "MOBILE",
			// preferredCountries: ['cn', 'jp'],
			// separateDialCode: true,
			utilsScript: "js/utils.js"
		});
	</script>
	<script>
		mui.init({
			statusBarBackground: '#f7f7f7'
			/*<img class="logo1 d-b m-c mt-60 mb-50" src="images/login.jpg" alt="" />*/
		});

		mui.plusReady(function () {
			var guidePage = plus.webview.getWebviewById(plus.runtime.appid);
			if (guidePage) {
				plus.webview.close(guidePage);
			}
			
			plus.screen.lockOrientation("portrait-primary");
			var settings = app.getSettings();
			var state = app.getState();
			var mainPage = plus.webview.getWebviewById("main");
			var main_loaded_flag = false;
			if (!mainPage) {
				mainPage = mui.preload({
					"id": 'main',
					"url": 'main.html'
				});
			} else {
				main_loaded_flag = true;
			}

			mainPage.addEventListener("loaded", function () {
				main_loaded_flag = true;
			});
			var toMain = function () {
				//使用定时器的原因：
				//可能执行太快，main页面loaded事件尚未触发就执行自定义事件，此时必然会失败
				var id = setInterval(function () {
					if (main_loaded_flag) {
						clearInterval(id);
						mui.fire(mainPage, 'show', null);
						mainPage.show("pop-in");
					}
				}, 20);
			};

			//检查 "登录状态/锁屏状态" 开始
			if (settings.autoLogin && state.token && settings.gestures) {
				/* mui.openWindow({
					url: 'unlock.html',
					id: 'unlock',
					show: {
						aniShow: 'pop-in'
					},
					waiting: {
						autoShow: false
					}
				}); */
			} else if (settings.autoLogin && state.token) {
				toMain();
			} else {
				app.setState(null);
				var auths = {};

				document.getElementById('mbLogin').addEventListener('tap', function () {
					var loginPage = plus.webview.getWebviewById('login');
					if (loginPage) {
						plus.webview.close(loginPage);
					}
					mui.openWindow({
						id: 'main',
						url: 'main.html',
						show: {
							aniShow: 'none'
						},
						waiting: {
							autoShow: true
						}
					});
					plus.webview.close(plus.webview.currentWebview());
				});
			}
		});

		function submit() {
			clicked("main.html", true, {
				"mid": "通过extras传递数据"
			});
		}
	</script>
	<script type="text/javascript" charset="utf-8">
		/* mui.init({
			statusBarBackground: '#f7f7f7'
			// keyEventBind: {
							// backbutton: false  //关闭back按键监听
						// }
		}); */

		//set storage item
		function setStorage(key, value) {
			plus.storage.setItem(key, value);
		}
		//输入验证码时触发事件
		var myCode = document.getElementsByName("sms");
		var lgBtn = document.getElementsByName("lg-btn");
		var agree = document.getElementsByName("agree");
		/*myCode.addEventListener("tap",function(){
			if(myCode.value == ""){
				lgBtn.style.background = "#c7c7cd";
				lgBtn.disabled = true;
				agree.style.display = "none";
			}else{
				lgBtn.style.background = "#0195df";
				lgBtn.disabled = false;
				agree.style.display = "block";
			}
		});*/

		//获取验证码
		var getcode = document.getElementsByName("sms");
		/*getcode.addEventListener("tap",function(){
				//mui.toast(1);
				var phone = h("#phone").val();
				if(phone == ""){
						mui.toast("手机号码不能为空");
						return;
					}else if(phone.length !== 11){
						mui.toast("请输入正确的手机号码");
						return;
					}
					mui.ajax({
				//url: "http://167317e29y.51mypc.cn/yiliapp/register",
					url: "http://192.168.199.173:8080/BMQ/register", 
				data: {phone:phone},
				async: false, // 异步 || 同步
				//crossDomain: true, //强制使用5+跨域
				dataType: 'json',
				type: 'post',
				timeout: 10000,
				success: function(data) {
					// 请求成功
					 //mui.toast(1);
					 //mui.toast(data.code);        
					mui.toast("验证码已发送到您的手机");
				},
				error: function(xhr, type, errorThrown) {
					// 请求失败
					mui.toast("请求失败");
				}
			});
	
			});*/
		//获取验证码 end

		var state = false; //登录状态
		h("#lg-btn").tap(function () {
			phone = h("#phone").val();
			code = h("#myCode").val();

			//表单验证
			if (state == false) {
				if (phone == "") {
					mui.toast("手机号码不能为空");
					return;
				} else if (phone.length !== 11) {
					mui.toast("请输入正确的手机号码");
					return;
				}

				state = true;
			}
			//    		alert("测试"+code+"手机号=="+phone);
			mui.ajax({
				url: "http://172.16.72.240:8080/yiliapp/register/checkphone",
				type: "POST",
				datatype: "json",
				data: {
					phone: phone
				},
				success: function (res) { //成功回调函数判断该手机号是否已经注册过   type="0"则首次注册
					if (res.type == "0") {
						mui.ajax({
							//			    url: "http://167317e29y.51mypc.cn/yiliapp/register/getcode",
							url: "http://172.16.72.240:8080/yiliapp/register/getcode",
							data: {
								phone: res.phone,
								code: code
							},
							async: false, // 异步 || 同步
							//crossDomain: true, //强制使用5+跨域
							dataType: 'json',
							type: 'post',
							timeout: 10000,
							success: function (data) {
								if (data.code == 1) {
									setStorage("phone", phone);
									plus.storage.setItem("userid", JSON.stringify(data.userid));

									mui.toast("登录成功");
									mui.openWindow({
										url: "trans1.html",
										id: "trans1.html",
										styles: {
											popGesture: "close"
										},
										extras: {},
										show: {
											aniShow: "slide-in-bottom"
										},
										waiting: {
											autoShow: false
										}
									});
								} else {
									mui.toast("验证码错误");
								}
							},
							error: function (xhr, type, errorThrown) {
								// 请求失败
								mui.toast("请求失败");
							}
						});
					} else { //用户之前已注册过  再次登陆app
						mui.ajax({
							//			    url: "http://167317e29y.51mypc.cn/yiliapp/register/getcode",
							url: "http://172.16.72.240:8080/yiliapp/register/getcode",
							data: {
								phone: res.phone,
								code: code
							},
							async: false, // 异步 || 同步
							//crossDomain: true, //强制使用5+跨域
							dataType: 'json',
							type: 'post',
							timeout: 10000,
							success: function (data) {
								if (data.code == 1) {
									//			        	alert("测试2=="+res.name);
									plus.storage.setItem("userid", JSON.stringify(res.userid));
									setStorage("phone", res.phone);
									plus.storage.setItem("name", res.name);
									plus.storage.setItem("image", res.images);
									mui.toast("登录成功");
									mui.openWindow({
										url: "index.html",
										id: "index.html",
										styles: {
											popGesture: "close"
										},
										extras: {},
										show: {
											aniShow: "slide-in-bottom"
										},
										waiting: {
											autoShow: false
										}
									});
								} else {
									mui.toast("验证码错误");
								}
							},
							error: function (xhr, type, errorThrown) {
								// 请求失败
								mui.toast("请求失败");
							}
						});
					}
				}
			});
		});

		mui.plusReady(function () { });

		var clock = '';
		var nums = 60;
		var codebtn;
		var getCode = document.getElementById("getcode");
		/*getCode.addEventListener("tap",function(){
			sendCode(this);
		});*/
		function sendCode(thisBtn) {
			var phone = h("#phone").val();
			if (phone.length !== 11) {
				mui.toast("请输入正确的手机号码");
				return;
			}
			//mui.toast("验证码已发送到你手机");
			codebtn = thisBtn;
			codebtn.disabled = true; //将按钮置为不可点击
			codebtn.innerHTML = '重新发送(' + nums + ')';
			clock = setInterval(doLoop, 1000); //一秒执行一次
		}

		function doLoop() {
			nums--;
			if (nums > 0) {
				codebtn.innerHTML = '重新发送(' + nums + ')';
			} else {
				clearInterval(clock); //清除js定时器
				codebtn.disabled = false;
				codebtn.innerHTML = '重发验证码';
				nums = 60; //重置时间
			}
		}
	</script>
</body>

</html>